<template>
  <div class="category">
    <article>
      <section v-for="item in list" :key="item.id">
        <h5>
          <span>【原创】</span>
          <span :to="'/article/'+item._id" class="title" @click="read(item)">{{item.title}}</span>
        </h5>
        <div class="time">
          <span class="day">{{item.date|day}}</span>
          <span class="mongth">
            {{item.date|month}}
            <span>月</span>
          </span>
          <span class="year">{{item.date|year}}</span>
        </div>
        <div class="content">
          <span @click="read(item)">
            <img :src="item.url" alt />
          </span>{{item.desc}}
        </div>
        <div class="read">
          <span @click="read(item)">继续阅读</span>
        </div>
        <aside class="footer">
          <span class="person">
            <i class="iconfont">&#xe60a;</i>
            <router-link to="">{{item.region}}</router-link>
          </span>
          <span class="look">
            <i class="iconfont icon">&#xe60b;</i>
            <i class="num">{{item.watch}}</i>
          </span>
        </aside>
      </section>
    </article>
  </div>
</template>

<script>
export default {
    data(){
        return {
            list:[],
        }
    },
    created() {
      this.getData()
    },
    methods: {
      getData(){
        this.$axios.get("/article")
          .then(res=>{
            if(this.$store.state.atcSearch){
              this.list=this.$store.state.atcSearch
            }else{
              this.list=res.data
            }
          })
      },
      read(atc){
        let id=atc._id
        this.$axios.post("/atcnum",id)
            .then(()=>{
                
            })
        this.$router.push("/article/"+atc._id)
        this.$store.commit("savearticle",atc)
      }
    },
    filters:{
      year(value){
        return new Date(value).getFullYear()
      },
      month(value){
        return (new Date(value).getMonth()+1).toString().padStart(2,"0")
      },
      day(value){
        return new Date(value).getDate().toString().padStart(2,"0")
      }
    }
};
</script>

<style lang="less">
.category {
  width: 72%;
  float:left;
  article {
    section {
      position: relative;
      padding: 20px 20px 20px;
      background-color: white;
      margin-bottom:20px;
      animation:section .8s ease-out;
      h5 {
        box-sizing: border-box;
        line-height: 40px;
        width:calc(85% - 10px);
        border-bottom: 1px solid #e8e9e7;
        span {
          color: #2ea7e0;
        }
        .title{
          display:inline;
          margin-left:20px;
          font-size:18px;
          color:#212220;
          &:hover{
            color:#6bc30d;
            border-bottom:1px solid #6bc30d;
            cursor: pointer;
          }
        }
      }
      .time {
        position: absolute;
        right: 43px;
        top: 13px;
        .day {
          display: block;
          text-align: center;
          font-weight: 700;
          font-size: 40px;
          color: #6bc30d;
          position: relative;
          top: -7px;
        }
        .mongth {
          color: #989997;
        }
        .year {
          margin-left: 10px;
          color: #989997;
        }
      }
      .content {
        margin: 20px 0 0 0;
        line-height: 28px;
        position: relative;
        min-height: 200px;
        color:#515250;
        font: 14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
        span {
          display: block;
          width: 300px;
          height: 180px;
          border: 1px solid #e8e9e7;
          overflow: hidden;
          float: left;
          margin-right: 20px;
          &:hover{
            cursor: pointer;
          }
          img {
            display: block;
            width: 100% !important;
            height: 100% !important;
          }
        }
      }
      .read {
        height: 40px;
        line-height: 40px;
        position: relative;
        margin-bottom:5px;
        &::after {
          content: " ";
          display: inline-block;
          height: 1px;
          top: 20px;
          left: 100px;
          right: 30px;
          position: absolute;
          background-color: #d0d0d0;
        }
        span {
          color: black;
          &:hover{
            cursor: pointer;
            color:#6bc30d;
            border-bottom:1px solid #6bc30d;
          }
        }
      }
      .footer {
        color: #787977;
        padding-right:50px;
        height:30px;
        .look {
          float:right;
          .icon {
            display: inline-block;
            vertical-align: middle;
            font-style: normal;
            margin-right:10px;
          }
          .num {
            display: inline-block;
            vertical-align: middle;
            font-style: normal;
          }
        }
        .person{
          display:flex;
          line-height:23px;
          float:left;
          i{
            font-size:18px;
            margin-right:10px;
          }
          a{
            display: inline-block;
            font-size: 12px;
            padding: 2px 3px;
            background-color: #f1f2f0;
            color: #787977;
            margin: 2px;
            text-decoration: none;
            transition: all .2s;
            height:15px;
            text-align: center;
            line-height: 15px;
            &:hover{
              background:#6bc30d;
              color:white;
            }
          }
        }
      }
    }
    @keyframes section {
        0%{
          transform:scale(.2)
        }
        100%{
          transform:scale(1)
        }
    }
    @media all and(max-width: 900px) {
        section{
          width:131%;
        }
    }
  }
}
</style>